<template>
    <div class="search">
        <search-bar left-arrow show-action action-text="搜索"
                    v-model="searchTerm"
                    @click-left="$router.back()"
                    @search="handleRouteToProducts"
                    @action="handleRouteToProducts"/>
        <white-space/>
        <section class="search-history" v-if="termsNotEmpty">
            <van-cell title="历史搜索" :border="false" center>
                <template #right-icon>
                    <div class="search-closeable-group" v-if="closeable">
                        <van-button plain size="mini" @click.stop="handleClearSearchTerms">全部删除</van-button>
                        <divider class="search-button-divider"/>
                        <van-button plain size="mini" type="danger" @click="closeable = !closeable">完成</van-button>
                    </div>
                    <van-icon name="delete" :size="18" @click="closeable = !closeable" v-else/>
                </template>
            </van-cell>
            <wing-blank>
                <search-term v-for="term in terms" :key="term.term" :closeable="closeable"
                             @click="handleRouteToProducts(term.term)" @close="handleDeleteSearchTerm(term.term)">
                    {{term.term}}
                </search-term>
            </wing-blank>
            <white-space/>
        </section>
    </div>
</template>

<script>
  import _ from "lodash"
  import { Button, Cell, Icon, Search, Toast } from "vant"
  import WhiteSpace from "@/components/WhiteSpace"
  import SearchTerm from "@/views/search/SearchTerm"
  import WingBlank from "@/components/WingBlank"

  import { customer, message, security } from "@mall/api-services"
  import Divider from "@/components/Divider"
  import SearchBar from "@/components/SearchBar"

  export default {
    name: "SearchView",
    components: {
      SearchBar,
      Divider,
      WingBlank,
      SearchTerm,
      WhiteSpace,
      [Cell.name]: Cell,
      [Button.name]: Button,
      [Icon.name]: Icon,
      [Search.name]: Search,
    },
    computed: {
      termsNotEmpty() {
        return !_.isEmpty(this.terms)
      },
    },
    data() {
      return {
        searchTerm: "",
        terms: [],
        closeable: false,
      }
    },
    created() {
      this.refreshSearchTerms()
    },
    methods: {
      handleRouteToProducts(name) {
        this.addSearchTerm(name)
        this.$router.push({
          path: "/products",
          query: { name },
        })
      },
      handleDeleteSearchTerm(name) {
        const customerId = security.SecurityUserHolder.getUserId()
        customer.SearchTermServiceV1.deleteSearchTerm(customerId, name)
          .then(this.refreshSearchTerms)
          .catch(({ response }) => Toast(message.getResponseMessage(response)))
      },
      handleClearSearchTerms() {
        const customerId = security.SecurityUserHolder.getUserId()
        customer.SearchTermServiceV1.clearSearchTerms(customerId)
          .then(this.refreshSearchTerms)
          .catch(({ response }) => Toast(message.getResponseMessage(response)))
      },
      addSearchTerm(name) {
        const customerId = security.SecurityUserHolder.getUserId()
        customer.SearchTermServiceV1.addSearchTerm(customerId, name)
      },
      refreshSearchTerms() {
        const customerId = security.SecurityUserHolder.getUserId()
        customer.SearchTermServiceV1
          .getSearchTerms(customerId)
          .then(terms => this.terms = terms)
      },
    },
  }
</script>

<style lang="scss" scoped>
    .search {
        .search-header {
            display: flex;
            align-items: center;
            background: #fff;

            .search-header-left {
                padding-left: 12px;
            }

            .search-header-bar {
                flex: 1;
                background: inherit;
            }
        }

        .search-history {
            background: #fff;
        }

        .search-closeable-group {
            display: inline-flex;
            align-items: center;
            flex-direction: row;

            .van-button {
                min-width: initial;
                border: none;

                &:focus, &:active {
                    &:before {
                        background: initial;
                    }
                }
            }

            .search-button-divider:after {
                top: -6px;
            }
        }
    }
</style>
